<template>
	<view class="bigView">
		<view class="topView">
			<view class="itemInput" style="margin-top: 8px;">
				<view class="leftLabel2">*</view>
				<view class="leftLabel">姓名</view>
				<u--input class="customInput" placeholder="请输入内容" border="surround" v-model="form.empeName"	
				inputAlign="right"></u--input>
			</view>
			<view class="itemInput">
				<view class="leftLabel2">*</view>
				<view class="leftLabel">手机号</view>
				<u--input class="customInput" placeholder="请输入内容" border="surround"
				    v-model="form.empeCellPhone" inputAlign="right"></u--input>
			</view>
			<view class="itemInput">
				<view class="leftLabel2">*</view>
				<view class="leftLabel">身份证号码</view>
				<u--input class="customInput" placeholder="请输入内容" border="surround"
				    v-model="form.empeIdCard"	inputAlign="right"></u--input>
			</view>
			<view class="itemInput">
				<view class="leftLabel2" style="color: white;">*</view>
				<view class="leftLabel">参加工作时间</view>
				<view :class="['empeDegreeView',form.empeWorkDate?'empeDegreeSel':'empeDegreeNor']" @click="workDateShowHandle">
					{{form.empeWorkDate?form.empeWorkDate:'请选择'}}
				</view>
			</view>
			<view class="itemInput">
				<view class="leftLabel2">*</view>
				<view class="leftLabel">性别</view>
				<view :class="['empeDegreeView',form.empeGenderText?'empeDegreeSel':'empeDegreeNor']" @click="genderShow=true">
					{{form.empeGenderText?form.empeGenderText:'请选择'}}
				</view>
			</view>
			<view class="itemInput">
				<view class="leftLabel2" style="color: white;">*</view>
				<view class="leftLabel">学历</view>
				<view :class="['empeDegreeView',form.empeDegree?'empeDegreeSel':'empeDegreeNor']" @click="popupShowHandle(1)">
					{{form.empeDegree?form.empeDegree:'请选择'}}
				</view>
			</view>
			<view class="itemInput">
				<view class="leftLabel2">*</view>
				<view class="leftLabel">办公地点</view>
				<view :class="['empeDegreeView',form.empeWorkCity?'empeDegreeSel':'empeDegreeNor']" @click="popupShowHandle(2)">
					{{form.empeWorkCity?form.empeWorkCityText:'请选择'}}
				</view>
			</view>
			<view class="itemInput">
				<view class="leftLabel2" style="color: white;">*</view>
				<view class="leftLabel">应聘岗位	</view>
				<u--input class="customInput" placeholder="请输入内容" border="surround"
				    v-model="form.empeDuty"	inputAlign="right"></u--input>
			</view>
			<view class="itemInput">
				<view class="leftLabel2" style="color: white;">*</view>
				<view class="leftLabel">籍贯	</view>
				<u--input class="customInput" placeholder="请输入内容" border="surround"
				    v-model="form.empeOrigin"	inputAlign="right"></u--input>
			</view>
			<view class="itemInput">
				<view class="leftLabel2" style="color: white;">*</view>
				<view class="leftLabel">与推荐人关系	</view>
				<u--input class="customInput" placeholder="请输入内容" border="surround"
				    v-model="form.empeRelation"	inputAlign="right"></u--input>
			</view>
			<view class="itemInput">
				<view class="leftLabel2" style="color: white;">*</view>
				<view class="leftLabel">推荐理由</view>
				<u--input class="customInput" placeholder="请输入内容" border="surround"
				    v-model="form.empeComment"	inputAlign="right"></u--input>
			</view>
		</view>
		<view class="bottomView" :style="[{height:bottom + 'px'}]">
			<view class="sure" @click="sureHandle">确定</view>
		</view>
		
		<u-popup :show="show" @close="close" @open="open" :safeAreaInsetBottom="false" round="10">
			<view class="bottomPopView" :style="[{marginBottom:bottom + 'px'}]">
				<view style="flex: 1;">
					<view style="height: 40px;display: flex;flex-direction: row;align-items: center;" :key="index" v-for="(item,index) in list" @click="popupItemHandle(item)">
						<view style="display: flex;flex: 1;margin-left: 10px;">
							{{item.codeName}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="genderShow" @close="genderClose" @open="open" :safeAreaInsetBottom="false" round="10">
			<view class="bottomPopView" :style="[{marginBottom:bottom + 'px'}]">
				<view style="flex: 1;">
					<view style="height: 40px;display: flex;flex-direction: row;align-items: center;" :key="index" v-for="(item,index) in genderList" @click="genderPopupItemHandle(item)">
						<view style="display: flex;flex: 1;margin-left: 10px;">
							{{item.label}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<wu-calendar ref="calendar" @confirm="confirm" :insert="false"></wu-calendar>
	</view>
</template>

<script>
	// import { isJZNull } from '@/utils/auth';
import { isJZNull } from '../../../utils/auth';
import internalRecommendation from '@/api/internalRecommendation.js'
	export default{
		components:{
		},
		data(){
			return {
				bottom:0,
				show:false,
				workDateShow:false,
				genderShow:false,
				mode: 'date',
				list: [],
				educationalList:[],
				cityList:[],
				popStatus:1,
				genderList:[{label:'男',value:0},{label:'女',value:1}],
				form:{
					empeName:'',//姓名
					empeIdCard:'',//身份证	
					empeCellPhone:'',// 手机	
					empeDegree:'',//学历
					empeComment:'',//推荐理由
					empeWorkCity:'',//办公地点
					empeWorkCityText:'',//办公地点文本
					empeDuty:'',//岗位
					empeGender:null,//性别
					empeGenderText:'',
					empeOrigin:'',//籍贯	
					empeRelation:'',//与推荐人关系
					empeWorkDate:'',// 参加工作时间	
				}
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom-20;
			}})
			this.getEducationalBackground()
			this.getOfficeLocation()
		},
		methods:{
			confirm(e){
				console.log(e.fulldate)
				this.form.empeWorkDate = e.fulldate;
			},
			workDateShowHandle(){
				// this.workDateShow=true;
				this.$refs.calendar.open();
			},
			popupShowHandle(status){
				this.popStatus = status;
				if(status==1){
					this.list = this.educationalList;
				}else{
					this.list = this.cityList;
				}
				this.show = true;
				if(status==1){
					
				}
				
			},
			popupItemHandle(item){
				this.show = false;
				if(this.popStatus == 1){//学历
					this.form.empeDegree = item.codeName;
				}else{// 办公地点
					this.form.empeWorkCity = item.codeValue;
					this.form.empeWorkCityText = item.codeName;
				}
			},
			genderPopupItemHandle(item){
				this.genderShow = false;
				this.form.empeGender = item.value;
				this.form.empeGenderText = item.label;
			},
			getEducationalBackground(){
				internalRecommendation.getEducationalBackground({}).then(res =>{
					this.educationalList = res;
				}).catch(err =>{
					
				})
			},
			getOfficeLocation(){
				internalRecommendation.getOfficeLocation({}).then(res =>{
					this.cityList = res;
				}).catch(err =>{
					
				})
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			genderClose() {
			  this.genderShow = false
			  // console.log('close');
			},
			testHandle(){
				uni.showModal({
					title:"12313123"
				})
				this.show = true
			},
			sureHandle(){
				if (isJZNull(this.form.empeName)) {
					uni.showToast({
						icon:'none',
						title:'名称不能为空'
					})
					return
				}
				if (isJZNull(this.form.empeCellPhone)) {
					uni.showToast({
						icon:'none',
						title:'手机号不能为空'
					})
					return
				}
				if (isJZNull(this.form.empeIdCard)) {
					uni.showToast({
						icon:'none',
						title:'身份证号不能为空'
					})
					return
				}
				// if (isJZNull(this.form.empeWorkDate)) {
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'参加工作时间不能为空'
				// 	})
				// 	return
				// }
				if (isJZNull(this.form.empeGenderText)) {
					uni.showToast({
						icon:'none',
						title:'性别不能为空'
					})
					return
				}
				// if (isJZNull(this.form.empeDegree)) {
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'学历不能为空'
				// 	})
				// 	return
				// }
				if (isJZNull(this.form.empeWorkCity)) {
					uni.showToast({
						icon:'none',
						title:'办公地点不能为空'
					})
					return
				}
				// if (isJZNull(this.form.empeDuty)) {
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'应聘岗位不能为空'
				// 	})
				// 	return
				// }
				// console.log(this.form)
				uni.showLoading({
					title:'提交中...'
				})
				internalRecommendation.addHandle(this.form).then(res =>{
					uni.hideLoading()
					uni.showToast({
						title: '操作成功'
					})
					// setTimeout(() => {
					// 	uni.navigateBack()
					// },500)
					this.resetHandle()
				}).catch(error =>{
					uni.hideLoading()
				})
			},
			resetHandle(){
				this.form = {
					empeName:'',//姓名
					empeIdCard:'',//身份证	
					empeCellPhone:'',// 手机	
					empeDegree:'',//学历
					empeComment:'',//推荐理由
					empeWorkCity:'',//办公地点
					empeWorkCityText:'',//办公地点文本
					empeDuty:'',//岗位
					empeGender:null,//性别
					empeGenderText:'',
					empeOrigin:'',//籍贯	
					empeRelation:'',//与推荐人关系
					empeWorkDate:'',// 参加工作时间	
				}
			},
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
	// $screenWidth: 100vw;
	// $marginLeft: 32px;
	$faceWidth: calc(100vw - 60px);
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
	// align-items: center;
	// justify-content: center;
}
.topView{
	flex-grow: 1;
	// width: 100vw;
	// background-color: green;
	display: flex;
	flex-direction: column;
	// justify-content: center;
}

.bottomView{
	height: 150px;
	width: 100vw;
	// background-color: yellow;
	display: flex;
	justify-content: center;
	.sure{
		width: calc(100vw - 32px);//calc(100vw-#{32px});
		height: 48px;
		border-radius: 24px;
		background-color: #247BFD;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}
}

.itemInput{
		display: flex;
		flex-direction: row;
		height: 51px;
		background-color: white;
		align-items: center;
	}
	.leftLabel{
		padding-left: 2px;
	}
	.leftLabel2{
		padding-left: 16px;
		color: red;
	}
.subTitle{
	flex-grow: 1;
	margin-left: 10px;
	margin-right: 4px;
	text-align: right;
	color: #999999;
}
.bottomPopView{
	max-height: 600px;
	display: flex;
	flex-direction: column;
}
.empeDegreeView{
	flex: 1;
	height: 100%;
	text-align: right;
	display: flex;
	align-items: center;
	padding-right:5px;
	justify-content: flex-end;
}
.empeDegreeNor{
	color: #BDC0C9;
}

.empeDegreeSel{
	color: black;
}
</style>